<template>
  <div class="btn-add-attribute">
    <el-form size="small" label-position="right">
      <el-row>
       <!--<el-col :span="8">
          <el-form-item label="类型" label-width="80px">
            <el-input v-model="serviceId" placeholder="类型" clearable class="filter-item search-item" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="margin-left:10px;">
            <el-button type="primary" icon="el-icon-search" @click="toSearch">搜素</el-button>
            <el-button icon="el-icon-delete" @click="toReset">重置</el-button>
          </el-form-item>
        </el-col>-->
        <el-table
          ref="attributeTable"
          border
          stripe
          size="mini"
          fit
          :data="dataList | paging(pageNum,pageSize)"
          style="width:98.9%;"
        >
          <el-table-column align="center" label="#" type="index" :index="indexMethod" width="50" />
          <el-table-column align="center" min-width="10" width="150" label="时间">
            <template slot-scope="{row}">
                {{ row.timestamp }}
            </template>
          </el-table-column>
          <el-table-column align="center" width="120" label="类型">
            <template slot-scope="{row}">
                <div v-if="row.serviceId == 'DeviceStatus'">设备状态/心跳</div>
                <div v-if="row.serviceId == 'Alarm'">设备报警</div>
                <div v-if="row.serviceId == 'Control'">设备控制命令</div>
                <div v-if="row.serviceId == 'Reset'">设备复位</div>
                <div v-if="row.serviceId == 'Setting'">设备上传设置</div>  
            </template>
          </el-table-column>
          <af-table-column align="center" label="数据">
            <template slot-scope="{row}">          
                {{ row.serviceData }}
            </template>
          </af-table-column>
          <slot name="operation" />
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :page-sizes="pageSizeOptions"
          @pagination="getDataList"
        />
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'DeviceAttributeList',
  components: {
    Pagination
  },
  props: {
    sourceList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      pageSizeOptions: [5, 10, 20, 30, 40, 50, 80, 100, 120, 150, 200],
      pageNum: 1,
      pageSize: 5,
      dataList: [],
      total: 0,
      serviceId: '',
      serviceDataList:[]
    }
  },
  watch: {
    sourceList: function(val) {
      this.getDataList()
    }
  },
  created() {},
  mounted() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      this.dataList = this.sourceList
      var list = this.sourceList;
      this.total = list.length
    },
    toSearch() {
      this.pageNum = 1
      this.getDataList()
    },
    toReset(text) {
      this.serviceId = ''
      this.toSearch()
    },
    indexMethod(index) {
      return index + 1 + (this.pageNum - 1) * this.pageSize
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-add-attribute {
  margin-top: -12px;
  padding-bottom: 3px;
}
.fengefu {
  font-size: 14px;
  color: #409eff;
  font-weight: 550;
  margin: 0px 6px;
}
.text-save {
  color: #ff6363;
  font-size: 14px;
  cursor: pointer;
  margin-left: -3px;
}
.text-cancle {
  color: #f9c65b;
  font-size: 14px;
  cursor: pointer;
  margin-right: -3px;
}
.i-edit {
  color: #f9c65b;
  font-size: 19px;
  cursor: pointer;
}
.i-delete {
  color: #ff6363;
  font-size: 17px;
  cursor: pointer;
}
</style>

